<template>
  <!--课程详情-->
  <div v-title :data-title="courseTitle">
    <headers></headers>
    <div class="padding88">
      <div class="divider">
        <div class="auto">
          <router-link to="/">首页</router-link><span>></span><router-link :to="{path : 'offcourselist'}">线下课程列表</router-link><span>></span>{{courseTitle}}
        </div>
      </div>
    </div>
    <div class="class_content">
      <div class="auto clearfix">
        <div class="left pull-left">
          <img :src="courseImage" alt="" width="800" height="448" style="object-fit: contain">
          <div class="bottom" >
            <div class="pull-right"><span>分享</span>
              <a href="javascript:;" class="weixinshare">
                <img src="../../assets/qq.png" alt="" width="25">
                <img :src="QRCode" alt="" class="share_img" width="100">
              </a>
              <a :href="weiboShare" target="_blank" rel="noopener noreferrer" ><img src="../../assets/weibo.png" alt="" width="25" @click="offcourseShare"></a>
              <a :href="kongjianShare" target="_blank" rel="noopener noreferrer" ><img src="../../assets/kongjian.png" alt="" width="25" @click="offcourseShare"></a>
            </div>
          </div>
        </div>
        <div class="right pull-right">
          <ul>
            <li class="color333">课程名称：</li>
            <li>{{courseTitle}}</li>
            <!--<li class="color333">上课时间：{{courseBeginDate}}</li>-->
            <li class="color333">报名截止时间：{{deadline}}</li>
            <li class="color333">上课地址：</li>
            <li>{{courseAddress}}</li>
            <li>招收学员：</li>
            <li v-if="enrollNum > 0">{{enrollNum}}人</li>
            <li v-else>0人</li>
            <li>已报名：</li>
            <li>{{applyNum}}人</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="auto names_title clearfix">
      <div class="pull-left">
        <p>{{courseTitle}}</p>
        <p>￥{{coursePrice}}</p>
      </div>
      <div class="bottom" v-if="isApply === 1">
        <Button  class="pull-right" disabled="true" >您已报名</Button>
      </div>
      <div v-else>
        <div class="bottom" v-if="allowApply">
          <Button  class="pull-right" @click="apply" >报名</Button>
        </div>
        <div class="bottom" v-else>
          <Button  class="pull-right"  @click="apply" disabled style="background-color:#f5f5f5;color:#957960" >报名</Button>
        </div>
      </div>
    </div>
    <div class="auto clearfix twopart padding250">
      <div class="left pull-left">
        <Tabs :animated="false" value="name1">
          <TabPane label="课程介绍" name="name1">
           <!-- <p class="avatar"><img :src="lecturerImg" alt="" width="28">{{lecturerName}}
            </p>
            <div class="introduce">
              <p v-html="lecturerContent"></p>
            </div>-->
            <p class="avatar"><img src="../../assets/des.png" alt="" width="30">课程介绍</p>
            <div style="width: 100%;" class="introduce" v-html="courseContent">
            </div>
          </TabPane>
          <!--<TabPane label="课程介绍" name="name2" class="pinglun">
            <p class="avatar"><img src="../../assets/des.png" alt="" width="30">课程介绍</p>
            <div class="introduce" v-html="courseContent">
            </div>
          </TabPane>-->
        </Tabs>
      </div>
      <!--<div class="right pull-right">
        <p class="title">推荐课程</p>
        <ul>
          <li class="clearfix"   @click="detail(index)" v-for="(recommend,index) in recommends">
            <div class="curse pull-left">
              <img :src="recommend.courseImage" alt="" width="151" height="81">
              <div class="bg"></div>
              <img src="../../assets/play.png" alt="" width="26" class="play">
              <div class="vip" v-if="recommend.isVipFree === 0 && recommend.isFree === 1">VIP</div>
            </div>
            <div class="pull-left shipin wid170">
              <p>{{recommend.courseTitle}}</p>
              <p>{{recommend.courseCount}}视频 <img src="../../assets/usericon.png" alt="" width="16"> {{recommend.lecturerName}}</p>
            </div>
          </li>
        </ul>
      </div>-->
    </div>
    <asides></asides>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
    <loginmodal  ref="loginC"></loginmodal>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .pinglun {
    .ivu-form-item {
      margin-bottom: 10px;
    }

    .textarea {
      position: relative;

      button {
        position: absolute;
        background-color: #957960;
        color: #fff;
        height: 94px;
        width: 95px;
        right: 0;
        font-size: 19px;
        top: 0;
      }
    }

    .tip {
      font-size: 14px;
      color: #999;
      margin: 0px 0 15px;
    }

    .all {
      /*font-size: 16px;*/
      font-size: 14px;
      color: #000;
      margin-bottom: 20px;
    }

    .list > li {
      border-bottom: 1px dashed #dbdbdb;
      padding-bottom: 15px;
      margin-bottom: 15px;

      .left_content {
        img {
          border-radius: 50%;
        }

        ul {
          margin: 5px 0 0 15px;

          li {
            /*font-size: 16px;*/
            font-size: 14px;
            color: #000;
            line-height: 30px;
          }

          li:last-child {
            color: #999;
          }
        }
      }

      .pull-right {
        /*font-size: 16px;*/
        font-size: 14px;
        color: #999;

        img {
          margin-left: 10px;
          vertical-align: baseline;
        }
      }

      .other_pinglun {
        background-color: #f9f9f9;
        margin: 15px 0 0 55px;
        padding: 20px;

        li {
          /*font-size: 16px;*/
          font-size: 14px;
          color: #000;
          line-height: 25px;
        }
      }
    }

    .list > li:last-child {
      border-bottom: none;
    }

    .look {
      background-color: #f9f9f9;
      height: 56px;
      /*font-size: 16px;*/
      font-size: 14px;
      color: #999;
      border: none;
    }

    .ivu-btn:focus {
      box-shadow: none;
    }
  }

  .ivu-icon {
    font-size: 15px;
    color: #999;
    margin-bottom: 3px;
  }

  .model_header {
    color: #fff;
    text-align: center;
    background-color: #957960;
    height: 77px;
    line-height: 77px;
    font-size: 28px;
  }

  .model_content {
    padding: 30px 50px;

    form img {
      position: absolute;
      left: 10px;
      top: 14px
    }

    a {
      display: block;
    }

    .ivu-input {
      border-radius: 0;
      display: inline-block;
      width: 80%;
      height: 61px;
    }

    button {
      background-color: #957960;
      border-color: #957960;
    }

    .send {
      position: absolute;
      right: 0;
      top: 0;
      height: 61px;
      color: #fff;
      /*font-size: 16px;*/
      font-size: 14px;
    }

    .loginbtn {
      height: 63px;
      font-size: 20px;
    }
  }

  .other {
    /*font-size: 16px;*/
    font-size: 14px;
    color: #999;

    p {
      margin-top: 20px;
    }

    span {
      margin-right: 40px;
    }

    a {
      display: inline-block;
    }

    .margin20 {
      margin: 0 10px;
    }

    img {
      vertical-align: bottom;
    }
  }

  .divider{
    height: 53px;
    background-color: #2F261E;
    font-size: 14px;
    color: #fff;
    line-height: 53px;
    text-align: left;
    a{
      color: #fff;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }
  .class_content{
    background-color: #121212;
  }
  .names_title{
    background-color: #fff;
    color: #000;
    font-size: 22px;
    padding: 30px;
    text-align: left;
    margin-top: 20px;
    p:nth-child(2){
      color: #FF3300;
      margin-top: 5px;
    }
    button{
      margin-left: 10px;
      background-color: #957960;
      border-color: #957960;
      height: 41px;
      width: 159px;
      font-size: 16px;
      color: #fff;
      margin-top: 15px;
    }
  }
  .auto.twopart.clearfix{
    border:none;
    margin-top: 40px;
    .left{
      padding: 20px;
      /*margin-right: 20px;*/
      background-color: #fff;
      width: 100%;
    }
    .right{
      width: 380px;
      background-color: #fff;
      .title{
        font-size: 16px;
        color: #000;
        border:none;
      }
      ul{
        padding-top: 0;
        background-color: #fff;
        height: auto;
      }
      li{
        cursor: pointer;
        line-height: normal;
        margin-left: 0;
        margin-bottom: 10px;
        p.pull-left{
          position: relative;
          span{
            background-color: #ff9900;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding: 0px 5px;
            position: absolute;
            bottom: 15px;
            left: 0;
          }

        }
        .wid170{
          width: 170px;
        }
        div.pull-left{
          padding: 0;
          /*font-size: 16px;*/
          font-size: 14px;
          color: #333;
          /*margin-left: 20px;*/
          height: auto;
          p:first-child{
            font-weight: normal;
            height: 48px;
            margin: 0;
          }
          p:last-child{
            font-size: 14px;
            font-weight: normal;
            img{
              vertical-align: middle;
              margin-right: 10px;
            }
            span{
              margin-left: 20px;
            }
          }

        }
        div.curse{
          position: relative;
          margin-left: 0;
          .bg{
            width: 151px;
            height: 81px;
            position: absolute;
            top:0;
            left: 0;
            background-color: rgba(0,0,0,0.39);
          }
          .play{
            position: absolute;
            z-index: 9;
            top:50%;
            left: 50%;
            margin-left: -13px;
            margin-top: -13px;
          }
          .vip{
            padding: 0;
            background: url("../../assets/vip.png") no-repeat;
            width: 24px;
            height: 36px;
            background-size: 100% 100%;
            font-size: 12px;
            color: #fff;
            line-height: 30px;
            text-align: center;
            position: absolute;
            right: 0;
            top:0
          }
          span{
            background-color: #ff9900;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding: 3px 5px;
            position: absolute;
            bottom: 10px;
            left: 0;
          }
        }
        div.shipin p:last-child{
          font-size: 14px;
          color: #999;
          img{
            vertical-align: middle;
            margin: 0 5px 0 20px;
          }
        }
      }

    }
  }
  .auto.clearfix{
    position: relative;
    .left{
      /*width: 800px;*/
      text-align: left;
      .bottom{
        font-size: 14px;
        color: #999;
        padding: 0 20px;
        height: 81px;
        line-height: 81px;
        background-color: #191919;
        .weixinshare{
          position: relative;
          .share_img{
            position: absolute;
            top:23px;
            left: 0;
            background-color: #fff;
            padding: 5px;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
            z-index: 2;
            display: none;

          }
          &:hover .share_img{
            display: block;
            transition: all 0.3s;
          }
        }
        img{
          vertical-align: middle;
        }
        >img{
          margin-right: 10px;
        }
        >a{
          margin-right: 10px;
        }
        >img:nth-of-type(2){
          margin-left: 30px;
        }
        .pull-right{
          span{
            margin-right: 10px;
          }
          img{
            margin: 0 5px;
          }
        }
      }
      .avatar{
        font-size: 16px;
        color: #000;
        margin-bottom: 10px;
        padding-top: 12px;
        img{
          margin-right: 20px;
          vertical-align: middle;
          border-radius: 50%;
        }
      }
      .introduce{
        margin-left: 48px;
        line-height: 33px;
        /*font-size: 16px;*/
        font-size: 14px;
        color: #666;
        img{
          max-width: 712px;
          object-fit: contain;
        }
      }
    }
    .right{
      width: 388px;
      padding-left: 12px;
      text-align: left;
      background-color: #2a2a2a;
      .title{
        font-size: 24px;
        color: #000;
        border-bottom: 1px solid #f5f5f5;
        padding: 20px 10px 15px;
      }
      .bottom{
        color:#ff3300;
        font-size: 24px;
        position: absolute;
        bottom: 20px;
        right: 20px;
        button{
          margin-left: 10px;
          background-color: #957960;
          border-color: #957960;
          height: 37px;
          width: 150px;
          font-size: 14px;
          color: #fff;

        }
      }
      ul{
        font-size: 14px;
        color: #fff;
        padding-right: 10px;
        background-color: #191919;
        padding-top: 10px;
        height: 534px;
        li{
          line-height: 30px;
          margin-left: 30px;
          margin-bottom: 10px;
        }
      }

    }
  }

</style>
<script type="text/ecmascript-6">
  import asides from '../template/aside'
  import headers from '../template/header'
  import footers from '../template/footer'
  import loginmodal from '../template/loginmodal'
  import {offlineCourseDetailWeb,collecon,addOrder,centreInfoWeb,shareApp} from '../../http'
  import imgPathFilter from '../../myFilters'
  import {getStore} from '../../storage'
  export default {
    inject:['reload'],
    name: 'detail',
    props: {},
    data() {
      return {
        isSpinShow:false,
        weiboShare:'',          //微博分享
        kongjianShare:'',      //空间分享
        courseTitle: '',       //课程标题
        courseImage: '',       //课程图片
        courseBeginDate: '',    //课程开始时间
        deadline:'',            //报名截止时间
        courseAddress: '',       //课程地址
        enrollNum: '',       //课程人数
        courseContent: '',       //课程介绍
        coursePrice: '',       //课程价格
        applyNum: '',       //课程已报名人数
        isCollecon:'',       //用户是否收藏
        isApply:'',       //用户是否购买
        QRCode:'',        //分享二维码
        courseId:this.$route.query.courseId,  //课程Id
        url:window.location.href,
        allowApply:false,       //是否允许报名
      };
    },
    methods: {
      //分享获取积分
      offcourseShare(){
        centreInfoWeb().then(res => {
          if(res.code === 200) {
            //用户收藏
            shareApp({courseId:this.courseId,type:5}).then(res => {
            }).catch()
          }
        })
      },
      //收藏(App没有收藏，故方法隐藏)
      shouCang : function () {
        //用户是否登录
        centreInfoWeb().then(res => {
            if(res.code === 200) {
              //用户收藏
              collecon({targetId:this.courseId,type:'4',optType:1}).then(res => {
                if(res.data === 1){
                  this.isCollecon = 1;
                }
                if(res.data === 3){
                  this.isCollecon = 0;
                }
              }).catch()
            }else{
              this.$refs.loginC.showModal();
            }
        })
      },
      //推荐课程切换
      // detail(index){
      //   let cour = this.recommends[index];
      //     this.$router.push({
      //       name:'coursedetail',
      //       query:{courseId:cour.courseId},
      //     })
      // },
      //购买课程
      apply(){
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          //用户是否登录
          centreInfoWeb().then(res => {
            if (res.code === 200) {
              //报名前提线下报名人数未满
              if (parseInt(this.enrollNum) > parseInt(this.applyNum)) {
                addOrder({type: 'OT_OFFCOURSE', targetId: this.courseId, applyType: 3}).then(res => {
                  this.isSpinShow = false;
                  if (res.code === 200) {
                    //报名成功，前往支付
                    this.$router.push({
                      name: 'buy',
                      query: {
                        orderId: res.data.orderId
                      }
                    })
                  } else {
                    this.$Notice.warning({
                      title: "购买提醒",
                      desc: res.info,
                      duration: 3,
                    });
                  }
                }).catch()
              }
            } else {
              //用户未登录，显示登录框
              this.$refs.loginC.showModal();
            }
          }).catch()
        }
      },
      //获取线下课程
      getOffCourse(){
        offlineCourseDetailWeb({courseId: this.courseId, url: this.url}).then(res => {
          this.isSpinShow = false;
          //浏览器标题配置
          this.$route.meta.title = res.data.courseTitle;
          let obj = res.data;
          this.courseTitle = obj.courseTitle;
          this.courseImage = obj.courseImage;
          this.courseBeginDate = obj.courseBeginDate;
          this.deadline = obj.deadline;
          this.courseAddress = obj.courseAddress;
          this.enrollNum = obj.enrollNum;
          this.courseContent = obj.courseContent;
          this.coursePrice = obj.coursePrice;
          this.applyNum = obj.applyNum;
          this.isCollecon = obj.isCollecon;
          this.isApply = obj.isApply;
          this.QRCode = "data:image/png;base64," + res.data.QRCode;
          //分享
          this.kongjianShare = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=" + encodeURIComponent(this.courseTitle) + "&url=" + encodeURIComponent(obj.urlShare) + "&summary=" + encodeURIComponent(res.data.content.replace(/&nbsp;/g,'')) + "\"";
          this.weiboShare = "http://service.weibo.com/share/share.php?title=【" + encodeURIComponent(this.courseTitle) + "】" + encodeURIComponent(res.data.content.replace(/&nbsp;/g,'')) + "&url=" + encodeURIComponent(obj.urlShare) + "&appkey=411882175" + "\"";
          //是否允许报名
          if (obj.applyType === 0) {
            this.allowApply = false;
          } else {
            this.allowApply = true;
          }
        }).catch()
      },
      //获取课程信息
      getOfflineCourseDetail(){
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          if (getStore('token') !== null && getStore('token') !== undefined && getStore('token') !== '') {
            //获取用户信息
            centreInfoWeb().then(res => {
              if (res.code === 200) {
                this.getOffCourse();
              } else {
                this.getOffCourse();
              }
            }).catch()
          } else {
            this.getOffCourse();
          }
        }
      }
    },
    created() {
      this.getOfflineCourseDetail();
    },
    components: {
      asides,
      headers,
      footers,
      loginmodal
    }
  }
</script>
